<template>
  <div class="V-Ranvideo" @click="getVideoD(recVideoLists)">
    <div class="img">
      <img :src="recVideoLists.cover" alt="" />
      <span> <i class="iconfont icon-caozuo-bofang"></i>{{get}} </span>
      <b> {{getTime}} </b>
    </div>
    <p>{{recVideoLists.name}}</p>
  </div>
</template>

<script>
export default {
    props: {
        recVideoLists:Object
    },
    computed: {
        get(){
            if (this.recVideoLists.playCount>10000) {
                let nums = (this.recVideoLists.playCount/10000).toFixed(1) + '万'
                return nums
            }else{
                return this.recVideoLists.playCount
            }
        },
        getTime(){
            let m = Math.floor(this.recVideoLists.duration/1000/60)
            let s = Math.floor((this.recVideoLists.duration/1000)%60)
            m = m<10?'0'+m:m;
            s = s<10?'0'+s:s;
            return `${m}:${s}`
        },
    },
    methods: {
        getVideoD(item){
            this.$router.push({path:'/videodetails',query:{item}})
        }
    }
};
</script>

<style scoped lang="scss">
.V-Ranvideo {
  width: 49%;
  height: 620px;
  position: relative;
  background: #fff;
  border-radius: 10px 10px 10px 10px;
  margin-bottom: 33px;
  .img {
    img {
      width: 100%;
      height: 433px;
      border-radius: 30px 30px 0 0;
    }
    span {
      display: flex;
      align-items: center;
      position: absolute;
      left: 5px;
      top: 333px;
      font-size: 12px;
      color: #fff;
    }
    i {
      font-size: 86px;
      color: #fff;
      margin-right: 20px;
    }
    b {
      position: absolute;
      right: 5px;
      top: 346px;
      font-size: 12px;
      color: #fff;
    }
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box; 
    -webkit-line-clamp:2; 
    -webkit-box-orient:vertical;
  }
}
</style>